<template>
  <div class="app-container">
    <aside class="aside">
      <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" class="search-form">
        <el-form-item class="margin-bottom-0">
          <el-select v-model="searchForm.company">
            <el-option :value="0" label="请选择" />
            <el-option v-for="(c, i) of company.array" :key="'c' + i" :value="c.value" :label="c.label" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.type">
            <el-option value="" label="请选择区域" />
            <el-option v-for="(item, index) of shop.type.items" :key="'type' + index" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <city :len="2" @change="id => searchForm.city = id" />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="tableData.current_page = 0">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="el-icon-plus" type="primary" @click="newShop">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="el-icon-upload" type="primary" @click="openImport">导入</el-button>
        </el-form-item>
      </el-form>
    </aside>
    <el-container class="pd-0">
      <el-main class="pd-0">
        <el-table :data="tableData.data" border stripe>
          <af-table-column type="index" label="#" />
          <af-table-column prop="company_name" label="所属企业" />
          <af-table-column prop="type" label="区域" />
          <af-table-column prop="name" label="店名" />
          <af-table-column prop="city_name" label="城市" />
          <af-table-column prop="address" label="详细地址" />
          <af-table-column prop="tel" label="联系电话" />
          <el-table-column label="操作" width="200px">
            <template slot-scope="{row, $index}">
              <el-button size="mini" class="el-icon-edit" type="primary" :title="row.id" @click="editShop($index)">编辑</el-button>
              <el-button size="mini" class="el-icon-delete" type="info" @click="delShop($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <my-page :data="tableData" @change="page => { tableData.current_page = page }" />
      </el-main>
    </el-container>
    <el-footer>
      <orm-create ref="ormModel" title="门店信息" :form-data.sync="shop" @submit="saveShop" />
      <orm-import ref="importModel" :columns="templateColumns" :template-file="templateFile" @submit="handlerImport" />
    </el-footer>
  </div>
</template>

<script>
import orm from '@/api/orm'
import city from '@/api/city'
import company from '@/api/company'
import shop from '@/api/shop'

import ImportTemplate from '@/config/importTemplate'
import OrmCreate from '@/components/ORM/Create'
import OrmImport from '@/components/ORM/Import'
import MyPage from '@/components/MyPage/index'
import City from '@/components/ORM/components/city'
export default {
  name: 'ShopIndex1',
  components: { City, OrmCreate, OrmImport, MyPage },
  data() {
    return {
      orm: 'Shop',
      searchForm: {
        company: 0,
        type: '',
        city: 0
      },
      company: { array: [], json: {}},
      tableData: {
        data: [],
        current_page: 0,
        per_page: 0,
        total: 0
      },
      regions: [],
      shopId: 0,
      shop: {
        company: { type: 'select', value: '', title: '拍摄商', items: [] },
        type: { type: 'select', value: '', title: '区域', items: [{ value: 'A', label: 'A类' }, { value: 'B', label: 'B类' }, { value: 'C', label: 'C类' }] },
        name: { type: 'string', value: '', title: '店名' },
        city: { type: 'city', value: '', title: '城市', len: 2 },
        address: { type: 'string', value: '', title: '详细地址' },
        tel: { type: 'string', value: '', title: '电话' },
        lat: { type: 'string', value: '', title: '纬度' },
        lon: { type: 'string', value: '', title: '经度' }
      },
      templateColumns: ImportTemplate.shop,
      templateFile: process.env.VUE_APP_HOST + '/file/shop.xlsx'
    }
  },
  watch: {
    'company.array'(oldVal, newVal) {
      this.shop.company.items = this.company.array
    },
    'tableData.current_page'() {
      this.getShops()
    }
  },
  created() {
    this.getCompanies()
    setTimeout(this.getShops, 1000)
    // this.getShops()
    city.regions().then(res => {
      this.regions = res.data
    })
  },
  methods: {
    getCompanies() {
      company.list().then(res => {
        this.company = res
      }).catch(res => {
        console.log('获取企业出错')
      })
    },
    getShops() {
      const where = []
      if (this.searchForm.company > 0) {
        where.push(['company', '=', this.searchForm.company])
      }
      if (this.searchForm.type) {
        where.push(['type', '=', this.searchForm.type])
      }
      if (this.searchForm.city) {
        where.push(['city', '=', this.searchForm.city])
      }
      orm.list(this.orm, where, this.tableData.current_page).then(res => {
        const shops = res.data
        shops.data.map(shop => {
          shop.company_name = this.company.json[shop.company].name
          shop.city_name = this.findCity(shop.city) + shop.region_name
          return shop
        })
        this.tableData = shops
      }).catch(() => {})
    },
    findCity(id) {
      id = parseInt(id)
      for (const city of this.regions) {
        if (id === city.value) {
          return city.full_name
        }
      }
    },
    newShop() {
      this.shopId = 0
      const keys = ['company', 'name', 'city', 'address', 'tel', 'lat', 'lon']
      for (const key of keys) {
        this.shop[key].value = ''
      }
      this.$refs.ormModel.open()
    },
    editShop(index) {
      const shop = this.tableData.data[index]
      this.shopId = shop.id
      const keys = ['company', 'type', 'name', 'city', 'address', 'tel', 'lat', 'lon']
      for (const key of keys) {
        this.shop[key].value = shop[key]
      }
      this.$refs.ormModel.open()
    },
    saveShop(data) {
      // 保存数据
      console.log('保存数据')
      console.log(data)
      this.$refs.ormModel.close()
      if (this.shopId === 0) {
        orm.create(this.orm, data).then(res => {
          this.getShops()
        })
      } else {
        orm.update(this.orm, this.shopId, data).then(res => {
          this.getShops()
        }).catch(() => {})
      }
    },
    delShop(index) {
      this.$confirm('确定删除该门店吗').then(res => {
        orm.delete(this.orm, this.tableData.data[index].id).then(res => {
          this.getShops()
        })
      })
    },
    openImport() {
      this.$refs.importModel.open()
    },
    handlerImport(shops) {
      shops.map(shop => {
        for (const c of this.company.array) {
          if (c.label === shop.company) {
            shop.company = c.value
          }
        }
        return shop
      })
      shop.import(shops).then(res => {
        if (res.code === 200) {
          this.$refs.importModel.close()
          this.getShops()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
